<template>
   <el-dialog title="选择成员" v-model="visibleDialog" :width="1000" style="color: #fff;" append-to-body class="promoter_person">
      <div class="person_body clear">
          <div class="person_tree l">             
              <OrgTree ref="orgTreeRef" @node-click="nodeClick" />           
              
          </div>
         
          <el-transfer v-model="checkedEmployessList" style="width: 930px;height: 100%;"
          :props="{  key: 'id', label: 'nickName' }" 
    :data="state.userData" 
     :titles="['员工', '已选择']"
    />
      </div>
      <template #footer>
          <el-button @click="$emit('update:visible',false)">取 消</el-button>
          <el-button type="primary" @click="saveDialog">确 定</el-button>
      </template>     
  </el-dialog>
</template>

<script setup>

import { computed, watch, ref,reactive,onMounted } from 'vue';
import { getAPI } from '/@/utils/axios-utils';
import { SysUserApi, SysOrgApi } from '/@/api-services/api';
import OrgTree from '/@/views/system/org/component/orgTree.vue';
const orgTreeRef = ref({});

let props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  data:{
    type: Array,
    default: ()=> []
  },
  isDepartment: {
    type: Boolean,
    default: false
  },
});


let emits = defineEmits(['update:visible', 'change'])
let visibleDialog = computed({
  get(){
    return props.visible
  },
  set(){
    closeDialog()
  }
});
let checkedDepartmentList = ref([])
let checkedEmployessList = ref([])

// 查询机构数据
const loadOrgData = async () => {
	state.loading = true;
	let res = await getAPI(SysOrgApi).apiSysOrgListGet(0);
	state.orgTreeData = res.data.result ?? [];
	state.loading = false;
};

// 查询员工操作
const handleQuery = async () => {
	state.loading = true;
	let params = Object.assign(state.queryParams, state.tableParams);
	let res = await getAPI(SysUserApi).apiSysUserPagePost(params);
	state.userData = res.data.result?.items ?? [];
  console.log(state.userData);
	// state.tableParams.total = res.data.result?.total;
	// state.loading = false;
};
const state = reactive({
	loading: false,
	userData: [] ,
	orgTreeData: [] ,
	queryParams: {
		orgId: -1,	
	},
	tableParams: {
		page: 1,
		pageSize: 1000,
		total: 0 ,
	},
	editUserTitle: '',
});


onMounted(async () => {
	await loadOrgData();
  checkedEmployessList.value=props.data;
  console.log(props.data);
	// await handleQuery();
});

const closeDialog = ()=> {
  emits('update:visible', false)
}

let total = computed(()=> checkedDepartmentList.value.length + checkedEmployessList.value.length)

let saveDialog = ()=> {

  console.log(checkedEmployessList.value);
  let checkedList = [
    // ...checkedDepartmentList.value,
    ...checkedEmployessList.value
  ].map(item=>({
    type: 3,
    targetId: item,
    name: state.userData.filter(it=>it.id===item).map(it=>it.nickName)[0]
  }))
  emits('change',checkedList)
}

const delList = ()=> {
  checkedDepartmentList.value = [];
  checkedEmployessList.value = []
}

// 树组件点击
const nodeClick = async (node) => {
	state.queryParams.orgId = node.id;
  checkedDepartmentList.value = node.id;
	await handleQuery();
};
</script>
<style lang="less">
.promoter_person {
 

  .el-dialog__title {
    clear: both;
    color: #fff;
  }
}
/* @import "./dialog.css"; */
</style>